<template>
  <div class="listWapper">
    <customDetailsTopbar title="安全生产投入" flag @back="back" />
    <div id="customScroolBox" class="listInner px-1">
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="企业列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div class="d-flex mt-2 w-100">
        <custom-radio-tag1 class="mb-1 w-100" :list="list" :value="activeIndex" is-scroll @change="tagChange" />
      </div>
      <div>
        <div v-if="listData.length > 0" class="common_list">
          <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                </div>
                <ul>
                  <template v-if="active === '年度投入费用使用'">
                    <li v-for="(des, ind) in yearDecList" :key="ind">
                      <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                      <div class="label">{{ des.label }}：</div>
                      <div class="value">{{ item[des.field] }}</div>
                    </li>
                  </template>
                  <template v-else>
                    <li v-for="(des, ind) in monthDecList" :key="ind">
                      <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                      <div class="label">{{ des.label }}：</div>
                      <div class="value">{{ item[des.field] }}</div>
                    </li>
                  </template>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
      </div>
      <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
        <div class="pop-vertical-flex">
          <div class="pop-content">
            <template>
              <custom-timer type="year" title="所属年份" :is-interval="false" :date-value.sync="form.years" />
              <!--              <customPopCheckbox :list="selectOptionAll['报警状态']" :check-value.sync="form.year" title="所属年份" />-->
              <customPopCheckbox :is-multiple="false" :radio-list="completionRate" :radio-value.sync="form.amountCompleRateFlag" title="实际支出占计提金额比例" />
            </template>
            <!--            <template v-else-if="active === '安全生产支出（月度）'">-->
            <!--              <custom-timer type="year" title="所属年份" :is-interval="false" :date-value.sync="form.years" />-->
            <!--              <customTimer title="检查时间" :start.sync="form.startTime" :end.sync="form.endTime" />-->
            <!--            </template>-->
          </div>
          <div class="pop-bottom">
            <van-button type="default" @click="resetSuperSearch">清空</van-button>
            <van-button type="info" @click="handleSuperSearch">确认</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import refHandler from '@/assets/mixin/refHandler'
import { CostLedgerList, productPlanList } from '@/api/safety'
export default {
  mixins: [commonList, refHandler],
  data() {
    return {
      active: '年度投入费用使用',
      activeIndex: 0,
      form: {
        years: new Date().getFullYear() + '',
        pageNum: 1,
        pageSize: 10,
        amountCompleRateFlag: '',
        companyName: '',
        companyIds: '-1'
      },
      completionRate: [
        { label: '≥100%', value: 1 },
        { label: '80%-100%(含80%)', value: 2 },
        { label: '60%-80%(含60%)', value: 3 },
        { label: '<60%', value: 4 }
      ],
      list: [
        {
          label: '年度投入费用使用',
          listFun: productPlanList
        },
        {
          label: '月度投入费用使用',
          listFun: CostLedgerList
        }
      ],
      current: '',
      listFun: productPlanList,
      listData: [],
      yearDecList: [
        { label: '所属年份', field: 'years', icon: '&#xe8d5;' },
        { label: '上年度生产收入（万元）', field: 'lastIncome', icon: '&#xe69a;' },
        { label: '上年度结余（万元）', field: 'lastSurplus', icon: '&#xe69a;' },
        { label: '本年度计提金额（万元）', field: 'currentAmount', icon: '&#xe69a;' },
        { label: '本年度实际提取金额（万元）', field: 'currentActualAmount', icon: '&#xe69a;' },
        { label: '本年度实际支出金额（万元）', field: 'costCount', icon: '&#xe69a;' },
        { label: '实际支出占实际提取金额比例（%）', field: 'amountActualCompleRate', icon: '&#xe6a7;' },
        { label: '实际支出占计提金额比例（%）', field: 'amountCompleRate', icon: '&#xe6a7;' },
        { label: '本年度结余（万元）', field: 'currentSurplus', icon: '&#xe69a;' }
      ],
      monthDecList: [
        { label: '所属年份', field: 'years', icon: '&#xe8d5;' },
        { label: '所属月份', field: 'month', icon: '&#xe64f;' },
        { label: '本月计提金额（万元）', field: 'currentAmount', icon: '&#xe69a;' },
        { label: '本月度实际提取金额（万元）', field: 'currentActualAmount', icon: '&#xe69a;' },
        { label: '本月度支出金额（万元）', field: 'costCount', icon: '&#xe69a;' },
        { label: '实际支出占实际提取金额比例（%）', field: 'amountActualCompleRate', icon: '&#xe6a7;' },
        { label: '实际支出占计提金额比例（%）', field: 'amountCompleRate', icon: '&#xe6a7;' }
      ]
    }
  },
  created() {
    this.initTag()
  },
  mounted() {
    const { current } = this.$route.query
    if (current) {
      this.current = current
    }
    this.companyList()
  },
  methods: {
    initTag() {
      const { current, active } = this.$route.query
      current ? this.current = current : ''
      active ? this.active = active : ''
      if (active) {
        const checkValueIndex = this.list.findIndex(val => val.label === active)
        this.activeIndex = checkValueIndex
        this.listFun = this.list.find(val => val.label === active).listFun
      }
    },
    tagChange(tagArg) {
      const { label, listFun } = tagArg.item
      this.active = label
      this.listFun = listFun
      this.form.pageNum = 1
      this.listData = []
      this.resetSuperSearch()
      this.companyList()
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      const pageSize = this.form.pageSize
      const pageNum = this.form.pageNum
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })

      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.years = new Date().getFullYear() + ''
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
      this.form.companyIds = '-1'
    },
    // 跳转详情
    goToDetails(item) {
      const { companyId } = item
      this.$router.push({
        path: '/staging/safeProductionDetail',
        query: { companyId, current: this.current, active: this.active, ...item }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList() {
      this.$refs.customLoadmore.loadStatus = true
      const { status, data } = await this.listFun(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
